
 <template>
  <div style="margin: 10px 0;">
    <el-pagination v-model:current-page="props.all.page" v-model:page-size="props.all.pageSize"
      :page-sizes="[3, 10, 15, 20]" :layout="layout" :total="props.all.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  all: {
    type: Object, //规定传过来值的类型
    default: {
      total: 0,
      page: 1,
      pageSize: 10,
    }, //添加默认值
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
});

const emit = defineEmits(["handleSizeChange", "handleCurrentChange"]);
/**
 * 改变条数
 * val -- 当前条
 */
const handleSizeChange = (val: number) => {
  let nav = Math.ceil(props.all.page / val);
  if (props.all.page > nav) {
    props.all.page = nav;
  }
  emit("handleSizeChange", val);
};
/**
 * 改变当前页
 * val -- 当前条
 */
const handleCurrentChange = (val: number) => {
  emit("handleCurrentChange", val);
};
</script>